<template>
    <div>
        <div class="condition-box">
            <dl class="category">
                <dd class="category-wrapper">
                    <span>项目类别：</span>
                    <el-button type="success" plain size="mini">不限</el-button>
                    <el-button size="mini">纵向</el-button>
                    <el-button size="mini">横向</el-button>
                    <el-button size="mini">省部</el-button>
                    <el-button size="mini">教育科研</el-button>
                </dd>
            </dl>
            <dl class="type">
                <dd class="type-wrapper">
                    <span>申请类型：</span>
                    <el-button type="success" plain size="mini">不限</el-button>
                    <el-button size="mini">自然人</el-button>
                    <el-button size="mini">机构/高效</el-button>
                    <el-button size="mini">企业</el-button>
                </dd>
            </dl>
            <dl class="fund">
                <dd class="fund-wrapper">
                    <span>申请资金：</span>
                    <el-button type="success" plain size="mini">不限</el-button>
                    <el-button size="mini">少于5万</el-button>
                    <el-button size="mini">5-8万</el-button>
                    <el-button size="mini">8-10万</el-button>
                    <el-button size="mini">10-15万</el-button>
                    <el-button size="mini">15-20万</el-button>
                    <el-button size="mini">20万以上</el-button>
                </dd>
            </dl>
            <dl class="field">
                <dd class="field-wrapper">
                    <span>行业领域：</span>
                    <el-button type="success" plain size="mini">不限</el-button>
                    <el-button size="mini">机械制造</el-button>
                    <el-button size="mini">安全生产</el-button>
                    <el-button size="mini">大数据</el-button>
                    <el-button size="mini">金融</el-button>
                    <el-button size="mini">信息安全</el-button>
                    <el-button size="mini">硬件设备</el-button>
                    <el-button size="mini">物联网</el-button>
                    <el-button size="mini">其他</el-button>
                </dd>
            </dl>
            <dl class="sort">
                <dd class="sort-wrapper">
                    <span>排序方式：</span>
                    <el-button size="mini">资金升序</el-button>
                    <el-button size="mini">资金降序</el-button>
                </dd>
            </dl>
        </div>
        <page-main>
            <ul>
                <li>
                    <div class="job-primary">
                        <router-link :to="{name:'ProjectReserveDetail'}">
                            <div class="info-primary">
                                <div class="primary-wrapper">
                                    <div class="primary-box">
                                        <div class="job-title">
                                            <span class="job-name">
                                                <a href="#">工业机器人3D全结构刚柔耦合交互特性视觉</a>
                                            </span>
                                        </div>
                                        <div class="job-limit">
                                            <span class="red">20-25万</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-company">
                                    <div class="company-text">
                                        <h3 class="name">
                                            <a href="#">张三</a>
                                        </h3>
                                        <p><a class="false-link" href="#">重庆市科技学院</a></p>
                                    </div>
                                    <img class="company-logo" src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20210521/748b31c16d772916bcf221cce8c2228038a6f2e70b3f166d92d87a4c07a2d8ff.jpg?x-oss-process=image/resize,w_100,limit_0">
                                </div>
                            </div>
                        </router-link>
                        <div class="info-append">
                            <div class="tags">
                                <span class="tag-item">信息安全</span>
                                <span class="tag-item">人工智能</span>
                                <span class="tag-item">火灾</span>
                                <span class="tag-item">大数据</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="job-primary">
                        <router-link :to="{name:'ProjectReserveDetail'}">
                            <div class="info-primary">
                                <div class="primary-wrapper">
                                    <div class="primary-box">
                                        <div class="job-title">
                                            <span class="job-name">
                                                <a href="#">基于深度学习的火灾应急指挥系统</a>
                                            </span>
                                        </div>
                                        <div class="job-limit">
                                            <span class="red">10-13万</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="info-company">
                                    <div class="company-text">
                                        <h3 class="name">
                                            <a href="#">李四</a>
                                        </h3>
                                        <p><a class="false-link" href="#">重庆市科技学院</a></p>
                                    </div>
                                    <img class="company-logo" src="https://img.bosszhipin.com/beijin/mcs/bar/20201120/a3f189d285805328e300da946656d96ebe1bd4a3bd2a63f070bdbdada9aad826.png?x-oss-process=image/resize,w_100,limit_0">
                                </div>
                            </div>
                        </router-link>
                        <div class="info-append">
                            <div class="tags">
                                <span class="tag-item">互联网</span>
                                <span class="tag-item">金融</span>
                                <span class="tag-item">计算机</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </page-main>
    </div>
</template>

<script>

export default {
    name: 'ProjectReserveIndex',
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.condition-box {
    span {
        font-size: 12px;
    }
    dl {
        margin: 10px;
    }
}
li {
    height: 130px;
    margin-bottom: 10px;
    background-color: #fff;
    cursor: pointer;
    list-style: none;
}
ul {
    padding-left: 12px;
}
.job-primary {
    height: 100px;
    padding: 0;
    margin: 0 30px;
    border-bottom: 1px #f2f2f5 solid;
    position: relative;
}
.info-primary {
    width: auto;
    height: 90px;
    padding-top: 20px;
    float: none;
}
.primary-wrapper {
    float: left;
    width: 440px;
    vertical-align: top;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 60px;
}
.primary-box {
    display: inline-block;
    line-height: 26px;
}
.job-title {
    font-size: 16px;
    color: #00c2b3;
    font-weight: 400;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}
.job-name {
    font-size: 16px;
    overflow: hidden;
    vertical-align: middle;
    float: left;
    display: block;
}
.job-name a {
    color: #00c2b3;
    text-decoration: none;
}
.job-limit {
    height: 26px;
    overflow: hidden;
}
.red {
    float: left;
    display: inline-block;
    line-height: 26px;
    position: relative;
    vertical-align: middle;
    color: #fc703e !important;
}
.info-company {
    width: 350px;
    float: right;
    vertical-align: top;
    height: 56px;
}
.company-text {
    width: auto;
    height: 56px;
    float: left;
    display: inline-block;
    vertical-align: top;
}
.name {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 3px;
    height: 26px;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 2px;
}
.name a {
    color: #00c2b3;
    white-space: nowrap;
    overflow: hidden;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    text-decoration: none;
}
.company-text p {
    margin-top: 2px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}
.false-link {
    color: #61687c;
    text-decoration: none;
}
.company-logo {
    float: right;
    width: 54px;
    height: 54px;
    border: 1px solid #f3f5fb;
    border-radius: 9px;
    display: inline-block;
    vertical-align: top;
    margin-left: 23px;
}
.info-append {
    height: 40px;
    line-height: 40px;
    margin: 0 -30px;
    padding: 0 30px;
    background: #f8f9fc;
}
.tags {
    float: left;
    width: 380px;
    overflow: hidden;
    height: 40px;
}
.tag-item {
    font-size: 12px;
    height: 21px;
    line-height: 21px;
    padding: 0 8px;
    border: 1px solid #eee;
    border-radius: 2px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 9px;
    color: #61687c;
}
.page-main {
    background: #80808000;
    padding-top: 0;
}
</style>
